import { computed, defineComponent, PropType, reactive, ref, toRaw, watch } from 'vue'
import dayjs, { Dayjs } from 'dayjs'
import {
  Form,
  FormItem,
  Input,
  SelectOptGroup,
  Select,
  SelectOption,
  RangePicker,
} from 'ant-design-vue'

import {
  EUploadStatus,
  MediaId,
  MediaInfo,
  MediaRemoveReqParam,
  MediaSearchReqParam,
  MediauUpdateTitleReqParam,
  ResPageList,
} from '@/core/mediaRecorder/apiType'
import { format } from '@/utils/date'
const Option = Select.Option
export default defineComponent({
  name: 'SearchList',
  props: {
    reqParam: {
      type: Object as PropType<MediaSearchReqParam>,
      default: () => {},
    },
    changeReqParam: {
      type: Function,
      default: () => {},
    },
  },
  setup(props, { slots }) {
    const param = reactive({ ...props.reqParam })
    const change = (key: keyof MediaSearchReqParam, value: any) => {
      props.changeReqParam(key, value)
    }

    return () => (
      <div class="media-record-search mt-4 mb-6">
        <Form model={param} layout="inline" style={{ display: 'flex' }}>
          <FormItem label={'标题'} name={'title'} style={{ marginTop: '20px' }}>
            <Input
              style={{ width: '8rem' }}
              defaultValue={param.title}
              onChange={(e) => {
                change('title', e.target.value)
              }}
              placeholder={'请输入标题'}
            ></Input>
          </FormItem>
          <FormItem label={'时间'} name={''} style={{ marginTop: '20px' }}>
            <RangePicker
              show-time={false}
              allowClear={false}
              inputReadOnly
              format="YYYY-MM-DD"
              style={{ minWidth: '8rem' }}
              // defaultValue={[dayjs(param.startTime * 100), dayjs(param.endTime * 100)]}
              onChange={(value) => {
                change(
                  'startTime',
                  dayjs(dayjs(value[0]).format('YYYY-MM-DD')).format('YYYY-MM-DD HH:mm:ss'),
                )
                change(
                  'endTime',
                  dayjs(dayjs(value[1]).format('YYYY-MM-DD' + ' 23:59:59')).format(
                    'YYYY-MM-DD HH:mm:ss',
                  ),
                )
              }}
            ></RangePicker>
          </FormItem>
          <FormItem style={{ marginTop: '20px' }}>
            {slots.default ? slots.default(toRaw(param)) : null}
          </FormItem>
        </Form>
      </div>
    )
  },
})
